Same as repr(MIME"text/html"(), x) but the IOContext is set up to match the one used by Pluto to render. This means that if the object being rendered wants to use AbstractPlutoDingetjes.is_supported_by_display, they can.

PlutoUI.combine(render_function::Function)

Combine multiple input elements into one. The combined values are sent to @bind as a single tuple.

render_function is a function that you write yourself, take a look at the examples below.

Examples

🐶 & 🐱

We use the do syntax to write our render_function. The Child function is wrapped around each input, to let combine know which values to combine.

@bind values PlutoUI.combine() do Child
	md"""
	# Hi there!

	I have $(
		Child(Slider(1:10))
	) dogs and $(
		Child(Slider(5:100))
	) cats.

	Would you like to see them? $(Child(CheckBox(true)))
	"""
end

values == (1, 5, true) # (initially)

The output looks like:

🎏

The combine function is most useful when you want to generate your input elements dynamically. This example uses HypertextLiteral.jl for the @htl macro:

function wind_speeds(directions)
	PlutoUI.combine() do Child
		@htl("""
		<h6>Wind speeds</h6>
		<ul>
		$([
			@htl("<li>$(name): $(Child(Slider(1:100)))</li>")
			for name in directions
		])
		</ul>
		""")
	end
end

@bind speeds wind_speeds(["North", "East", "South", "West"])

speeds == (1, 1, 1, 1) # (initially)

# after moving the sliders:
speeds == (100, 36, 73, 60)

The output looks like:

Named variant

In the last example, we used Child to wrap around contained inputs:

Child(Slider(1:100))

We can also use the named variant, which looks like:

Child("East", Slider(1:100))

When you use the named variant for all children, the bound value will be NamedTuple, instead of a Tuple.

Let's rewrite our example to use the named variant:

function wind_speeds(directions)
	PlutoUI.combine() do Child
		@htl("""
		<h6>Wind speeds</h6>
		<ul>
		$([
			@htl("<li>$(name): $(Child(name, Slider(1:100)))</li>")
			for name in directions
		])
		</ul>
		""")
	end
end

@bind speeds wind_speeds(["North", "East", "South", "West"])

speeds == (North=1, East=1, South=1, West=1) # (initially)

# after moving the sliders:
speeds == (North=100, East=36, South=73, West=60)

md"The Eastern wind speed is $(speeds.East)."

The output looks like:

Why?

You can make a new widget!

You can use combine to create a brand new widget yourself, by combining existing ones!

In the example above, we created a new widget called wind_speeds. You could put this function in a package (e.g. WeatherUI.jl) and people could use it like so:

import WeatherUI: wind_speeds

@bind speeds wind_speeds(["North", "East"])

In other words: you can use combine to create application-specific UI elements, and you can put those in your package!

Difference with repeated @bind

The standard way to combine multiple inputs into one output is to use @bind multiple times. Our initial example could more easily be written as:

md"""
# Hi there!

I have $(@bind num_dogs Slider(1:10)) dogs and $(@bind num_cats Slider(5:10)) cats.

Would you like to see them? $(@bind want_to_see CheckBox(true))
"""

The combine function is useful when you are generating inputs dynamically, like in our second example. This is useful when:

• The number of parameters is very large, and you don't want to write @bind parameter1 ..., @bind parameter2 ..., etc.

• The number of parameters is dynamic! For example, you can load in a table in one cell, and then use combine in another cell to select which rows you want to use.